<template>
    <!-- <div style="width: 1000%;height: 30%;"> -->
    <table style="width: 100%;">
        <tr>
            <td>
                <div class="common-layout" style="width: 100%;height: 30%;margin: 10px;">
                    <el-container>
                        <el-aside width="30%">
                            <img :src="form.goodFind.goodImage" alt="" style="width: 400px;height: 360px;">
                        </el-aside>
                        <el-main>
                            <table style="width: 100%;height: 100%;">
                                <tr>
                                    <td style="font-weight:bold;font-size: 40px;">{{ form.goodFind.goodName }}</td>
                                    <td></td>

                                </tr>
                                <tr style="font-size: 20px;">
                                    <td>生产批次：{{ form.goodFind.goodBatch }}</td>
                                    <td>保质期：{{ form.goodFind.goodShelf }} 天</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="font-size: 20px;">生产许可证号：{{ form.goodFind.goodNoSc }}</td>
                                    <td style="font-size: 20px;">生产企业：{{ form.goodFind.goodFirm }}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="font-size: 20px;font-weight: bold;">产品检验报告</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <el-upload v-model:file-list="fileListGood"
                                                action="https://localhost:7169/api/Good/LoadImages"
                                                list-type="picture-card" :on-preview="handlePictureCardPreview"
                                                :on-remove="handleRemove" :on-success="successImages">
                                                <el-icon>
                                                    <Plus />
                                                </el-icon>
                                            </el-upload>

                                            <el-dialog v-model="dialogVisible">
                                                <img w-full :src="dialogImageUrl" alt="Preview Image" />
                                            </el-dialog>
                                        </div>

                                    </td>

                                </tr>
                            </table>
                        </el-main>
                    </el-container>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="margin: 10px;">
                    <el-tabs v-model="form.activeName"  class="demo-tabs" @tab-click="handleClick"  >
                        <el-tab-pane label="养殖信息"  name="养殖信息">
                            <DetailCultivationView />
                        </el-tab-pane>
                        <el-tab-pane label="屠宰信息"  name="屠宰信息">
                            <DetailSlaughterView />
                        </el-tab-pane>
                        <el-tab-pane label="深加工信息" name="深加工信息">
                            <DetailprocessView />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </td>
        </tr>
    </table>


    <!-- </div> -->
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore();
const router = useRouter();
const route = useRoute();
const form = reactive({
    goodFind: {},
    goodId: store.GoodId,
    activeName: '养殖信息',
})
//反填
const goodDetailImage = () => {
    form.goodFind = JSON.parse(localStorage.getItem('goodDetail'))
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${form.goodId}`)
        .then(res => {
            console.log(res.data)
            fileListGood.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListGood.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}
onMounted(() => {
    goodDetailImage()
})
// 上传图片商品坚持报告
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileListGood = ref<UploadUserFile[]>([
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    let Url = uploadFile.url
    console.log(Url)

    axios.get(`https://localhost:7169/api/Good/DeletedImages?Url=${Url}`)
        .then(res => {
            ElMessage.success('删除成功')
        })
        .catch(err => {
            ElMessage.error('删除失败')

            console.log(err)
        })
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
//上传成功
const successImages = ((response: any) => {

    // console.log(response)
    let Url = 'https://localhost:7169/' + response
    axios.get(`https://localhost:7169/api/Good/AddImage?Id=${form.goodId}&Url=${Url}`)
        .then(res => {
            ElMessage.success('上传成功')
        })
        .catch(err => {
            // ElMessage.error('上传失败')

            console.log(err)
        })
    fileListGood.value.forEach((c: any) => {
        if (c.response == response) {
            c.url = Url
            return
        }
    });
    console.log(fileListGood)

}
)
//标签页
const handleClick = (event: Event) => {
    console.log(event.props)
}
import DetailCultivationView from '@/views/Detial/DetailCultivationView.vue'
import DetailprocessView from '@/views/Detial/DetailprocessView.vue'
import DetailSlaughterView from '@/views/Detial/DetailSlaughterView.vue'
</script>